<template>
  <div class="user-center">
    <!-- 左侧导航 -->
    <div class="sidebar">
      <div class="user-info">
        <div class="avatar">
          <img :src="userInfo.avatar" :alt="userInfo.name">
          <div class="upload-avatar">
            <input type="file" @change="handleAvatarUpload" accept="image/*">
            <i class="fas fa-camera"></i>
          </div>
        </div>
        <h3>{{ userInfo.name }}</h3>
        <p class="member-level">
          <i class="fas fa-crown"></i>
          {{ userInfo.memberLevel }} 会员
        </p>
      </div>
      <div class="nav-menu">
        <div 
          v-for="menu in menus" 
          :key="menu.key"
          :class="['menu-item', { active: activeMenu === menu.key }]"
          @click="activeMenu = menu.key"
        >
          <i :class="menu.icon"></i>
          {{ menu.label }}
        </div>
      </div>
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </div>

    <!-- 右侧内容区 -->
    <div class="content">
      <!-- 个人信息 -->
      <div v-if="activeMenu === 'profile'" class="profile-section">
        <h2>个人信息</h2>
        <div class="info-form">
          <div class="form-item">
            <label>用户名</label>
            <input v-model="userInfo.name" type="text">
          </div>
          <div class="form-item">
            <label>邮箱</label>
            <input v-model="userInfo.email" type="email" disabled>
          </div>
          <div class="form-item">
            <label>余额</label>
            <span class="balance">¥{{ userInfo.balance }}</span>
          </div>
          <div class="form-item">
            <label>积分</label>
            <span>{{ userInfo.points }} 分</span>
          </div>
          <button class="save-btn" @click="saveProfile">保存修改</button>
        </div>
      </div>

      <!-- 订单记录 -->
      <div v-if="activeMenu === 'orders'" class="orders-section">
        <h2>历史订单</h2>
        <div class="order-list">
          <div v-for="order in orders" :key="order.id" class="order-item">
            <div class="order-header">
              <span>订单号：{{ order.orderNo }}</span>
              <span>{{ order.createTime }}</span>
              <span :class="['status', order.status]">{{ order.statusText }}</span>
            </div>
            <div class="order-products">
              <div v-for="product in order.products" :key="product.id" class="product-item">
                <img :src="product.image" :alt="product.name">
                <div class="product-info">
                  <h4>{{ product.name }}</h4>
                  <p>¥{{ product.price }} × {{ product.quantity }}</p>
                </div>
              </div>
            </div>
            <div class="order-footer">
              <span class="total">总计：¥{{ order.total }}</span>
              <button 
                v-if="order.status === 'completed'"
                class="delete-btn" 
                @click="deleteOrder(order)"
              >
                删除订单
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付记录 -->
      <div v-if="activeMenu === 'payments'" class="payments-section">
        <h2>支付记录</h2>
        <div class="payment-list">
          <div v-for="payment in payments" :key="payment.id" class="payment-item">
            <div class="payment-info">
              <span class="amount" :class="{ income: payment.type === 'income' }">
                {{ payment.type === 'income' ? '+' : '-' }}¥{{ payment.amount }}
              </span>
              <span class="payment-type">{{ payment.typeText }}</span>
            </div>
            <div class="payment-detail">
              <span>{{ payment.description }}</span>
              <span>{{ payment.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

const router = useRouter()
const activeMenu = ref('profile')
const userStore = useUserStore()
const userInfo = ref({
  name: "测试用户",
  email: "test@example.com",
  avatar: "https://via.placeholder.com/100",
  balance: 1000,
  points: 500,
  memberLevel: "黄金"
})
const orders = ref([
  {
    id: 1,
    orderNo: "ORDER2024001",
    createTime: "2024-01-01",
    status: "completed",
    statusText: "已完成",
    total: 299.99,
    products: [
      {
        id: 1,
        name: "商品1",
        price: 99.99,
        quantity: 1,
        image: "https://via.placeholder.com/80"
      }
    ]
  }
])
const payments = ref([
  {
    id: 1,
    type: "expense",
    typeText: "消费",
    amount: 99.99,
    description: "购买商品",
    createTime: "2024-01-01"
  }
])

// 菜单配置
const menus = [
  { key: 'profile', label: '个人信息', icon: 'fas fa-user' },
  { key: 'orders', label: '历史订单', icon: 'fas fa-shopping-bag' },
  { key: 'payments', label: '支付记录', icon: 'fas fa-credit-card' }
]

// TODO: API - 获取用户信息
const getUserInfo = async () => {
  // const response = await request.get('/api/user/profile')
  // userInfo.value = response.data
}

// TODO: API - 获取订单列表
const getOrders = async () => {
  // const response = await request.get('/api/orders')
  // orders.value = response.data
}

// TODO: API - 获取支付记录
const getPayments = async () => {
  // const response = await request.get('/api/payments')
  // payments.value = response.data
}

// TODO: API - 上传头像
const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  // const formData = new FormData()
  // formData.append('avatar', file)
  // const response = await request.post('/api/user/avatar', formData)
  // userInfo.value.avatar = response.data.url
  alert('头像上传成功')
}

// TODO: API - 保存个人信息
const saveProfile = async () => {
  // await request.put('/api/user/profile', {
  //   name: userInfo.value.name
  // })
  alert('保存成功')
}

// TODO: API - 删除订单
const deleteOrder = async (order) => {
  if (confirm('确定要删除这个订单吗？')) {
    // await request.delete(`/api/orders/${order.id}`)
    orders.value = orders.value.filter(o => o.id !== order.id)
  }
}

// 退出登录
const handleLogout = () => {
  userStore.clearLoginState()
  router.push('/login')
}

onMounted(() => {
  getUserInfo()
  getOrders()
  getPayments()
})
</script>

<style scoped>
.user-center {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  width: 250px;
  background: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.user-info {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.avatar {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.upload-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.upload-avatar input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-avatar i {
  color: white;
  font-size: 14px;
}

.member-level {
  color: #ff9800;
  margin-top: 5px;
}

.nav-menu {
  flex: 1;
  margin: 20px 0;
}

.menu-item {
  padding: 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 5px;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item.active {
  background: #4CAF50;
  color: white;
}

.menu-item i {
  margin-right: 10px;
}

.logout-btn {
  padding: 10px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.content {
  flex: 1;
  padding: 20px;
}

.profile-section, .orders-section, .payments-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.info-form {
  max-width: 500px;
  margin-top: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
}

.form-item input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-item input:disabled {
  background: #f5f5f5;
}

.balance {
  color: #ff4444;
  font-weight: bold;
}

.save-btn {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.order-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.status {
  padding: 2px 8px;
  border-radius: 4px;
}

.status.completed {
  background: #4CAF50;
  color: white;
}

.status.pending {
  background: #ff9800;
  color: white;
}

.order-products {
  padding: 15px 0;
}

.product-item {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

.product-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.total {
  font-weight: bold;
}

.delete-btn {
  padding: 5px 15px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.payment-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.payment-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.amount {
  font-size: 18px;
  font-weight: bold;
  color: #ff4444;
}

.amount.income {
  color: #4CAF50;
}

.payment-detail {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}
</style> 